<template>
    <ul class="list">
      <li :class="['list-item', {active: currentItem.id === item.id}]" v-for="item in data" :key="item.id" @click="rowClick(item)">
        {{item[field]}}
      </li>
    </ul>
</template>
<script type="text/ecmascript-6">
  export default{
    props: ['data', 'selectItem', 'field'],
    data () {
      return {
        currentItem: this.selectItem
      }
    },
    watch: {
      selectItem (value) {
        this.currentItem = value
      }
    },
    methods: {
      rowClick (item) {
        this.currentItem = item
        this.$emit('selectChange', item)
      }
    }
  }
</script>
<style lang="less">
  .list {
    .list-item {
      line-height: 40px;
      padding: 0 10px;
      cursor: pointer;

      &.active, &:hover{
        color: #fff;
        background: #2d8cf0;
      }
    }
  }
</style>
